<template>
  <div>
    <span class="text-blue pointer" @click="toEdit"> 查看 </span>

    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="90%"
      center
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="运单号" prop="waybillNo"> </el-table-column>
        <el-table-column label="国家">
          <template slot-scope="scope">{{
            countryMap[scope.row.countryId]
          }}</template>
        </el-table-column>
        <el-table-column label="分区" show-overflow-tooltip>
          <template slot-scope="scope">{{
            stateMap[scope.row.provinceId]
          }}</template>
        </el-table-column>
        <el-table-column label="渠道" show-overflow-tooltip>
          <template slot-scope="scope">{{
            stockChanelMap[scope.row.inStockChannel]
          }}</template>
        </el-table-column>
        <el-table-column
          prop="inStockActualWeight"
          label="实重"
          show-overflow-tooltip
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="inStockVolume"
          label="体积"
          width="60"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="inStockVolumeWeight"
          label="体积重"
          width="60"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="inStockChargedWeight"
          label="计费重"
          width="60"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="outStockTime"
          label="出库日期"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column label="阿米巴科目" show-overflow-tooltip>
          <template slot-scope="scope">{{
            amoebaSubjectMap[scope.row.amoebaSubjectId]
          }}</template>
        </el-table-column>

        <el-table-column label="费用名称" show-overflow-tooltip>
          <template slot-scope="scope">{{
            payNameMap[scope.row.costId]
          }}</template>
        </el-table-column>
        <el-table-column prop="currency" label="币种" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="单价"
          width="60"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          width="60"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="money" label="总额" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="discountsCount"
          label="优惠数量"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="discountsPrice"
          label="优惠单价"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="discountsRemark"
          label="新增备注"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="同时给客户优惠" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.syncCustomer"></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column prop="costDate" label="结算日期" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建人" show-overflow-tooltip>
          <template slot-scope="scope">{{ userMap[scope.row.cuser] }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { ajax, actionPermission } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
export default {
  props: ["row", "data", "more"],
  data() {
    return {
      centerDialogVisible: false,
      tableData: [],
      multipleSelection: [],
      departMap: {},
      userMap: {},
      customerMap: {},
      applyDiscount: {},
      countryMap: {},
      payNameMap: {},
      stateMap: {},
      amoebaSubjectMap: {},
      stockChanelMap: {},
    };
  },

  methods: {
    initOptions() {
      var param = {};
      ajax("initOptions", param).then(
        (res) => {
          if (res.code === 200) {
            this.departMap = res.data.departMap;
            this.userMap = res.data.userMap;
            this.customerMap = res.data.customerMap;
            this.countryMap = res.data.countryMap;
            this.payNameMap = res.data.payNameMap;
            this.stateMap = res.data.stateMap;
            this.stockChanelMap = res.data.stockChanelMap;
            this.amoebaSubjectMap = res.data.amoebaSubjectMap;
          }
          this.tableData = this.data.details;
          console.log(this.tableData);
        },
        (error) => {
          console.log(error);
        }
      );
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    m(val) {
      return m(val);
    },

    toEdit() {
      this.centerDialogVisible = true;
      this.initOptions();
    },
  },
  mounted() {},
};
</script>

<style></style>
